<!-- 个人信息的菜单页面 -->
<template>
  <div class="userList">
    <div @tap="goUserInfo" class="titleDiv">
      <div class="main">
        <div class="left">
          <div v-if="userInfo.photo" v-html="userInfo.photo" class="noPhoto" />
          <div class="imgLeftDiv">
            <div class="verBottom nameDiv">
              <span class="leftName">{{ userInfo.name ? userInfo.name:'未知' }}</span>
              <span class="leftBM">{{ userInfo.deptname ? userInfo.deptname:'暂无' }}</span>
            </div>
            <div class="mubileDiv">{{ userInfo.usercode ? userInfo.usercode:'未知' }}</div>
          </div>
        </div>
        <div class="right">
          <i class="jeicon jeicon-angle-right iconSize" />
        </div>
      </div>
    </div>
    <!-- 中间灰色的背景 -->
    <div class="bgHr" />
    <!-- 置顶会话 -->
    <div class="changeDiv">
      <div class="main">
        <div class="mainText">置顶对话</div>
        <div>
          <div
            @tap="zdStatusClick()"
            :class="zdStatus?'mui-active':''"
            class="mui-switch mui-switch-mini"
          >
            <div class="mui-switch-handle" />
          </div>
        </div>
      </div>
    </div>
    <!-- 消息免打扰 -->
    <div class="changeDiv">
      <div class="main">
        <div class="mainText">消息免打扰</div>
        <div>
          <div
            @tap="wrStatusClick()"
            :class="wrStatus?'mui-active':''"
            class="mui-switch mui-switch-mini"
          >
            <div class="mui-switch-handle" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import Header from '@/components/header';
import Organ from '../../class/Organ'
import Group from '../../class/Group'
// import * as Util from '../../js/util';
// import Dialog from '../../class/Dialog';
export default {
  data() {
    return {
      userInfo: {},
      urlData: {},
      zdStatus: false,
      wrStatus: false,
    }
  },
  computed: {
    userId() {
      return JE.getCurrentUser().id
    },
  },
  async created() {
    const curPageObj = plus.webview.currentWebview()
    console.log('获取到的数据', curPageObj.childItem)
    this.rightId =
      curPageObj.childItem.otherInfo.userid || curPageObj.childItem.otherInfo.id
    this.urlData = curPageObj.childItem
    // 判断置顶和勿扰的选中状态
    this.zdAndwrStatus(this.urlData)
    await this.getData(this.rightId)
  },
  mounted() {
    window.addEventListener('changeUserInfoList', (e) => {
      const Data = e.detail
      this.urlData = Data
    })
  },
  methods: {
    // 点击头部用户信息进行跳转
    goUserInfo() {
      JE.fire('JE-PLUGIN-IM', 'org-chatTX', {
        webviewId: plus.webview.currentWebview().id,
        userId: this.rightId,
      })
    },
    // // 每次改变都发送监听事件到首页改变列表
    // groupChange() {
    //   console.log('监听zhi', this.urlData);
    //   const chatWebview = plus.webview.getWebviewById('__im_chat');
    //   Util.opensetStyle(chatWebview, this.urlData);
    // },
    // 根据rightID获取点击用户的详情
    async getData() {
      this.userInfo = await Organ.getUserInfoById(this.rightId)
      this.userInfo.photo = JE.getUserPhoto(
        this.rightId,
        true,
        this.userInfo.username
      )
      this.userInfo.name = this.userInfo.username
    },
    // 根据路径的参数判断是否是置顶或者勿扰
    zdAndwrStatus(data) {
      this.zdStatus = !!data.zd
      this.wrStatus = !!data.wr
    },
    // 点击置顶功能
    async zdStatusClick() {
      this.zdStatus = !this.zdStatus
      const status = this.zdStatus ? 1 : 0
      await Group.groupActual(this.urlData.id, this.userId, status, 2)
        .then((res) => {
          if (res.userId && status == 1) {
            this.urlData.zd = `${this.userId}`
            mui.toast('开启置顶')
          } else {
            this.urlData.zd = ''
            mui.toast('关闭置顶')
          }
          // this.groupChange(); // 派发监听事件
        })
        .catch((e) => {
          console.log(e)
        })
    },
    // 点击勿扰功能
    async wrStatusClick() {
      this.wrStatus = !this.wrStatus
      const status = this.wrStatus ? 1 : 0
      await Group.groupActual(this.urlData.id, this.userId, status, 3)
        .then((res) => {
          if (res.userId && status == 1) {
            this.urlData.zd = `${this.userId}`
            mui.toast('开启勿扰')
          } else {
            this.urlData.zd = ''
            mui.toast('关闭勿扰')
          }
          // this.groupChange(); // 派发监听事件
        })
        .catch((e) => {
          console.log(e)
        })
    },
  },
}
</script>
<style lang='less'>
.userList {
  .je-user-photo {
    width: 90px !important;
    height: 90px !important;
    border-radius: 50%;
  }
}
</style>
<style lang='less' scoped>
.userList {
  .verMiddle {
    vertical-align: middle;
  }
  .verBottom {
    vertical-align: bottom;
  }
  .titleDiv {
    padding: 48px 30px;
    .main {
      height: 100px;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        .noPhoto {
          width: 90px !important;
          height: 90px !important;
          overflow: hidden;
          display: block;
          border-radius: 50%;
          background: rgba(252, 179, 63, 1);
          text-align: center;
          line-height: 90px;
          font-size: 28px;
          color: #fff;
        }
        .imgLeftDiv {
          display: inline-block;
          margin-left: 20px;
          height: 90px;
          .mubileDiv {
            height: 45px;
            line-height: 45px;
            color: #a9aba9;
            font-size: 12px;
          }
          .nameDiv {
            height: 45px;
            line-height: 45px;
            .leftName {
              color: #3f3f3f;
              font-size: 32px;
            }
            .leftBM {
              color: #a9aba9;
              font-size: 20px;
              margin-left: 5px;
            }
          }
        }
      }
      .right {
        height: 90px;
        line-height: 90px;
        .iconSize {
          font-size: 30px;
        }
      }
    }
  }
  .bgHr {
    height: 20px;
    background: #f5f5f5;
  }
  .changeDiv {
    padding: 24px 30px;
    border-bottom: 4px solid #f5f5f5;
    .main {
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .mainText {
        color: #3f3f3f;
        font-size: 30px;
      }
    }
  }
}
</style>
